{% extends 'base_main.html' %}
{% load static %}
{% block extcss %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'app/home/home.css' %}">
{% endblock %}
{% block extjs %}
    <script type="text/javascript" src="{% static 'app/home/home.js' %}"></script>
{% endblock %}
{% block content %}
    <div id="home">
        {#    顶部轮播    #}
        <div class="swiper-container" id="topSwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#"><img src="{% static 'img/369_驯龙高手电影海报4k壁纸.png' %}"
                                                           alt="{{ wheels.0.name }}"></a></div>
                <div class="swiper-slide"><a href="#"><img src="{% static 'img/2_炫酷时尚品牌微软Windows104k壁纸.png' %}"
                                                           alt="{{ wheels.1.name }}"></a></div>
                <div class="swiper-slide"><a href="#"><img src="{% static 'img/10_星空星系4k壁纸.png' %}"
                                                           alt="{{ wheels.2.name }}"></a></div>
                <div class="swiper-slide"><a href="#"><img src="{% static 'img/11_简约Win10超4k壁纸.png' %}"
                                                           alt="{{ wheels.3.name }}"></a></div>
                <div class="swiper-slide"><a href="#"><img src="{% static 'img/371_风景法国巴黎卢浮宫城市夜景4k高清壁纸.png' %}"
                                                           alt="{{ wheels.4.name }}"></a></div>
            </div>
            {#            分页器#}
            <div class="swiper-pagination"></div>
        </div>
        {#    导航    #}
        <div class="topMenu">
            <nav>
                <ul>
                    <li><img src="{% static 'img/22_精英危险4k壁纸.png' %}"
                             alt="{{ navs.0.name }}"><span>{{ navs.0.name }}</span></li>
                    <li><img src="{% static 'img/23_风景北极光极地4k壁纸.png' %}" alt="{{ navs.1.name }}">{{ navs.1.name }}</li>
                    <li><img src="{% static 'img/362_饥饿游戏雪地射箭4k壁纸.png' %}" alt="{{ navs.2.name }}">{{ navs.2.name }}
                    </li>
                    <li><img src="{% static 'img/23_风景北极光极地4k壁纸.png' %}" alt="{{ navs.3.name }}">{{ navs.3.name }}</li>
                </ul>
            </nav>

        </div>
        {#    必购,也是轮播    #}
        <div id="swiperMenu" class="swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide"><img src="{% static 'img/364_风景秋景秋季山林森林山峰4k图片.png' %}"
                                              alt="{{ mustbuys.0.name }}"></li>
                <li class="swiper-slide"><img src="{% static 'img/374_空间星系行星宇宙小行星彗星4k壁纸.png' %}"
                                              alt="{{ mustbuys.1.name }}"></li>
                <li class="swiper-slide"><img src="{% static 'img/380_城市夜景大桥欧洲建筑4k壁纸.png' %}"
                                              alt="{{ mustbuys.2.name }}"></li>
                <li class="swiper-slide"><img src="{% static 'img/379_风景瀑布草原4k壁纸.png' %}" alt="{{ mustbuys.3.name }}">
                </li>
            </ul>

        </div>
        {#    商店       #}
        <div class="CVS">
            <h2>
                <img src="{% static 'img/382_萌宠动物兔子4k壁纸.png' %}" alt="{{ shop_1.name }}">
            </h2>
            <fieldset>
                <a href="#"><img src="{% static 'img/369_驯龙高手电影海报4k壁纸.png' %}" alt="{{ shop_2_3.0.name }}"></a>
                <a href="#"><img src="{% static 'img/370_风景大海海岸线4k壁纸.png' %}" alt="{{ shop_2_3.1.name }}"></a>
            </fieldset>
            <ul>
                <li><img src="{% static 'img/371_风景法国巴黎卢浮宫城市夜景4k高清壁纸.png' %}"
                         alt="{{ shop_4_7.0.name }}"><span>{{ shop_4_7.0.name }}</span></li>
                <li><img src="{% static 'img/374_空间星系行星宇宙小行星彗星4k壁纸.png' %}"
                         alt="{{ shop_4_7.1.name }}"><span>{{ shop_4_7.1.name }}</span></li>
                <li><img src="{% static 'img/383_阿特拉斯门户4k壁纸.png' %}"
                         alt="{{ shop_4_7.2.name }}"><span>{{ shop_4_7.2.name }}</span></li>
                <li><img src="{% static 'img/381_汽车超级跑车4k图片.png' %}"
                         alt="{{ shop_4_7.3.name }}"><span>{{ shop_4_7.3.name }}</span></li>
            </ul>
            <ol>
                <li>
                    <a href="#"><img src="{% static 'img/377_可爱女生初音未来长发好看的动漫4k壁纸.png' %}" alt="{{ shop_8_11.0.name }}"></a>
                </li>
                <li><a href="#"><img src="{% static 'img/379_风景瀑布草原4k壁纸.png' %}" alt="{{ shop_8_11.1.name }}"></a></li>
                <li><a href="#"><img src="{% static 'img/379_风景瀑布草原4k壁纸.png' %}" alt="{{ shop_8_11.2.name }}"></a></li>
                <li><a href="#"><img src="{% static 'img/380_城市夜景大桥欧洲建筑4k壁纸.png' %}" alt="{{ shop_8_11.3.name }}"></a>
                </li>
            </ol>
        </div>
        {#        主要显示    #}
        <div class="mainInfo">
            <section>
                <h3>{{ shows.0.name }}<span></span><a href="#">更多&gt;</a></h3>
                <div>
                    <a href="#"><img src="{% static 'img/1_游戏动漫4k图片.png' %}" alt="{{ shows.0.name }}"></a>
                </div>
                <ul>
                    <li>
                        <a href="#"><img src="{% static 'img/2_炫酷时尚品牌微软Windows104k壁纸.png' %}"
                                         alt="{{ shows.0.longname1 }}">
                            <p class="description">
                                {{ shows.0.longname1 }}
                            </p>
                            <span>
                            ￥{{ shows.0.price1 }}
                        </span>
                            <s>￥{{ shows.0.marketprice1 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/3_游戏汽车4k图片.png' %}" alt="{{ shows.0.longname2 }}">
                            <p class="description">
                                {{ shows.0.longname2 }}
                            </p>
                            <span>
                            ￥{{ shows.0.price2 }}
                        </span>
                            <s>￥{{ shows.0.marketprice2 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/4_星球大战游戏4k图片.png' %}" alt="{{ shows.0.longname3 }}">
                            <p class="description">
                                {{ shows.0.longname3 }}
                            </p>
                            <span>
                            ￥{{ shows.0.price3 }}
                        </span>
                            <s>￥{{ shows.0.marketprice3 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                </ul>
            </section>
            <section>
                <h3>{{ shows.1.name }}<span></span><a href="#">更多&gt;</a></h3>
                <div>
                    <a href="#"><img src="{% static 'img/5_游戏吃鸡绝地求生大逃杀4k壁纸.png' %}" alt="{{ shows.1.name }}"></a>
                </div>
                <ul>
                    <li>
                        <a href="#"><img src="{% static 'img/6_游戏尼尔机械纪元4k壁纸.png' %}"
                                         alt="{{ shows.1.longname1 }}">
                            <p class="description">
                                {{ shows.1.longname1 }}
                            </p>
                            <span>
                            ￥{{ shows.1.price1 }}
                        </span>
                            <s>￥{{ shows.1.marketprice1 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/7_神秘海域4盗贼末路游戏4k壁纸.png' %}" alt="{{ shows.1.longname2 }}">
                            <p class="description">
                                {{ shows.1.longname2 }}
                            </p>
                            <span>
                            ￥{{ shows.1.price2 }}
                        </span>
                            <s>￥{{ shows.1.marketprice2 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/8_饥饿游戏雪地射箭4k壁纸.png' %}" alt="{{ shows.1.longname3 }}">
                            <p class="description">
                                {{ shows.1.longname3 }}
                            </p>
                            <span>
                            ￥{{ shows.1.price3 }}
                        </span>
                            <s>￥{{ shows.1.marketprice3 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                </ul>
            </section>
            <section>
                <h3>{{ shows.2.name }}<span></span><a href="#">更多&gt;</a></h3>
                <div>
                    <a href="#"><img src="{% static 'img/9_游戏海报看门狗4k壁纸.png' %}" alt="{{ shows.2.name }}"></a>
                </div>
                <ul>
                    <li>
                        <a href="#"><img src="{% static 'img/10_游戏巫师34k壁纸.png' %}"
                                         alt="{{ shows.0.longname1 }}">
                            <p class="description">
                                {{ shows.2.longname1 }}
                            </p>
                            <span>
                            ￥{{ shows.2.price1 }}
                        </span>
                            <s>￥{{ shows.2.marketprice1 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/11_游戏工人物语4k壁纸.png' %}" alt="{{ shows.2.longname2 }}">
                            <p class="description">
                                {{ shows.2.longname2 }}
                            </p>
                            <span>
                            ￥{{ shows.2.price2 }}
                        </span>
                            <s>￥{{ shows.2.marketprice2 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/12_游戏跑车4k壁纸.png' %}" alt="{{ shows.2.longname3 }}">
                            <p class="description">
                                {{ shows.2.longname3 }}
                            </p>
                            <span>
                            ￥{{ shows.2.price3 }}
                        </span>
                            <s>￥{{ shows.2.marketprice3 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                </ul>
            </section>
            <section>
                <h3>{{ shows.3.name }}<span></span><a href="#">更多&gt;</a></h3>
                <div>
                    <a href="#"><img src="{% static 'img/13_游戏4k壁纸.png' %}" alt="{{ shows.3.name }}"></a>
                </div>
                <ul>
                    <li>
                        <a href="#"><img src="{% static 'img/14_游戏卡通最后的守护者野兽4k壁纸.png' %}"
                                         alt="{{ shows.3.longname1 }}">
                            <p class="description">
                                {{ shows.3.longname1 }}
                            </p>
                            <span>
                            ￥{{ shows.3.price1 }}
                        </span>
                            <s>￥{{ shows.3.marketprice1 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/15_游戏天空4k壁纸.png' %}" alt="{{ shows.3.longname2 }}">
                            <p class="description">
                                {{ shows.3.longname2 }}
                            </p>
                            <span>
                            ￥{{ shows.3.price2 }}
                        </span>
                            <s>￥{{ shows.3.marketprice2 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/16_使命召唤COD战争游戏射击4k壁纸.png' %}"
                                         alt="{{ shows.3.longname3 }}">
                            <p class="description">
                                {{ shows.3.longname3 }}
                            </p>
                            <span>
                            ￥{{ shows.3.price3 }}
                        </span>
                            <s>￥{{ shows.3.marketprice3 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                </ul>
            </section>
            <section>
                <h3>{{ shows.4.name }}<span></span><a href="#">更多&gt;</a></h3>
                <div>
                    <a href="#"><img src="{% static 'img/17_游戏主机游戏准备突击4k壁纸.png' %}" alt="{{ shows.4.name }}"></a>
                </div>
                <ul>
                    <li>
                        <a href="#"><img src="{% static 'img/18_游戏仁王主机游戏4k壁纸.png' %}"
                                         alt="{{ shows.4.longname1 }}">
                            <p class="description">
                                {{ shows.4.longname1 }}
                            </p>
                            <span>
                            ￥{{ shows.4.price1 }}
                        </span>
                            <s>￥{{ shows.4.marketprice1 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/19_游戏GTAV主机游戏侠盗猎车手4k壁纸.png' %}"
                                         alt="{{ shows.4.longname2 }}">
                            <p class="description">
                                {{ shows.4.longname2 }}
                            </p>
                            <span>
                            ￥{{ shows.4.price2 }}
                        </span>
                            <s>￥{{ shows.4.marketprice2 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/20_游戏主机游戏黑暗之魂34k壁纸.png' %}" alt="{{ shows.4.longname3 }}">
                            <p class="description">
                                {{ shows.4.longname3 }}
                            </p>
                            <span>
                            ￥{{ shows.4.price3 }}
                        </span>
                            <s>￥{{ shows.4.marketprice3 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                </ul>
            </section>
            <section>
                <h3>{{ shows.5.name }}<span></span><a href="#">更多&gt;</a></h3>
                <div>
                    <a href="#"><img src="{% static 'img/21_游戏主机游戏GTA5GTAV侠盗猎车手4k壁纸.png' %}"
                                     alt="{{ shows.5.name }}"></a>
                </div>
                <ul>
                    <li>
                        <a href="#"><img src="{% static 'img/22_精英危险4k壁纸.png' %}"
                                         alt="{{ shows.5.longname1 }}">
                            <p class="description">
                                {{ shows.5.longname1 }}
                            </p>
                            <span>
                            ￥{{ shows.5.price1 }}
                        </span>
                            <s>￥{{ shows.5.marketprice1 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/23_风景北极光极地4k壁纸.png' %}" alt="{{ shows.5.longname2 }}">
                            <p class="description">
                                {{ shows.5.longname2 }}
                            </p>
                            <span>
                            ￥{{ shows.5.price2 }}
                        </span>
                            <s>￥{{ shows.5.marketprice2 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'img/24_游戏主机游戏荣耀战魂4k壁纸.png' %}" alt="{{ shows.5.longname3 }}">
                            <p class="description">
                                {{ shows.5.longname3 }}
                            </p>
                            <span>
                            ￥{{ shows.5.price3 }}
                        </span>
                            <s>￥{{ shows.5.marketprice3 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                </ul>
            </section>
        </div>
    </div>
{% endblock %}
